import React, { Component } from 'react'
import Carousel from '../components/Carousel'
import '../assets/style/newHousedetail.less'
import Periphery from '../components/Periphery'
import BottomFun from '../components/Bottomfn'
import { Toast } from 'antd-mobile';
import axios from '../utils/http'

export default class newHousedetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            look_status: false,
            store: {}
        }
    }
    changeColor = (event) => {
        if (event.target.nodeName !== 'I') {
            return ''
        }
        if (!this.state.look_status) {
            event.target.setAttribute('class', 'iconfont icon-guanzhu')
            this.setState({
                look_status: true
            })
        } else {
            event.target.setAttribute('class', 'iconfont icon-xiazai11')
            this.setState({
                look_status: false
            })
        }
    }
    async componentDidMount() {
        const resdata = await axios({
            url: '/client/finddata',
            method: 'post',
            data: {
                id: this.props.match.params.id
            }
        })
        console.log(resdata.data);
        if (resdata.data.code === 200) {
            let image = JSON.parse(resdata.data.data[0].image)
            let images=[]
            image.forEach((item) => {
                item = '/syc_api' + item
                images.push(item)
            })
            resdata.data.data[0].image = images
            this.setState({
                store: resdata.data.data[0]
            })
        } else {
            Toast.fail(resdata.data.msg);
        }
        console.log(this.state.store);
    }

    mapNav = () => {
        this.props.history.push({ pathname: '/MapNav', state: this.state.store.address })
    }
    render() {
       
      
        return (
            this.state.store.image ? <div className="newHousedetail" >
                <Carousel data={this.state.store.image} ></Carousel>
                <h1>{this.state.store.title}</h1>
                <div className="detail_content">
                    <div className="detail_content_item">
                        <span>均价：</span>
                        <span>{this.state.store.price}元/㎡</span>
                    </div>
                    <div className="detail_content_item">
                        <span>开盘时间：</span>
                        <span>{new Date(this.state.store.createdAt).toLocaleString()}</span>
                    </div>
                    <div className="detail_content_item">
                        <span>地址：</span>
                        <span>{this.state.store.address}</span>
                    </div>
                    <div className="detail_content_item">
                        <span>开发商：</span>
                        <span>{this.state.store.Developers}</span>
                    </div>
                    <div className="detail_content_item">
                        <span>物业公司：</span>
                        <span>{this.state.store.company}</span>
                    </div>
                    <div className="house_detail">
                        <div className="detail_content_item">
                            <span>物业费：</span>
                            <span>{this.state.store.preporty}</span>
                        </div>
                        <div className="detail_content_item">
                            <span>物业类型：</span>
                            <span>{this.state.store.property_type}</span>
                        </div>
                        <div className="detail_content_item">
                            <span>产权年限：</span>
                            <span>{this.state.store.preporty_right}</span>
                        </div>
                        <div className="detail_content_item">
                            <span>建筑类型：</span>
                            <span>{this.state.store.Building_type}</span>
                        </div>
                        <div className="detail_content_item">
                            <span>占地面积：</span>
                            <span>{this.state.store.Land_occupation}</span>
                        </div>
                        <div className="detail_content_item">
                            <span>建筑面积：</span>
                            <span>{this.state.store.building_measure}</span>
                        </div>
                    </div>
                    <div className="detail_content_item">
                        <span>车位情况：</span>
                        <span>{this.state.store.cart_position}</span>
                    </div>
                    <div className="detail_content_item">
                        <span>计划户数：</span>
                        <span>{this.state.store.plan_user}</span>
                    </div>
                    <div className="detail_content_item">
                        <span>预售证号：</span>
                        <span>{this.state.store.pre_sale_card}</span>
                    </div>
                </div>

                {
                    this.state.store.address ? (<Periphery address={this.state.store.address}></Periphery>) : ""
                }
                <div className="bottom">
                    <BottomFun className="watch" iconfont="iconfont icon-xiazai11" value="关注" onClick={this.changeColor}></BottomFun>
                    <BottomFun className="watch" iconfont="iconfont icon-zixun" value="咨询"></BottomFun>
                    <BottomFun value="地图导航" className="mapnav" onClick={this.mapNav} ></BottomFun>
                    <BottomFun value="预约看房" className="prewatch" ></BottomFun>
                </div>
            </div>:""
            
        )
    }
}
